<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="author" content="Jxm">
        <script src="../jQuery/jquery-3.1.1.js"></script>
        <title></title>
        <style>
         body{
             height: 100%;
             background-color: #ccc;
         }   
         main{
             width: 1235px;
             height: 797px;
             margin: 30px auto;
             background-color: #fff;
             background-image: url(img/zzc.png);
             background-size: 100% 100%;
             position: relative;
         }
         main>#bor{
             width: 381px;
             height: 557px;
             position: absolute;
             top: 7px;
             left: 423px;
             border: 5px solid orange;
             opacity: 0;
         }
         /*main>div:hover{
             border: 5px solid orange;
         }*/
         #left,#right{
             width: 170px;
             height: 185px;            
         }
         #left{
             position: absolute;
             top: 593px;
             left: 434px;
         }
         #left>.l1{
             display: inline-block;
             width: 0;
             height: 100%;
            background-color: #333;
             opacity: 0.6;
         }
         #right{
             position: absolute;
             top: 593px;
             left: 623px;
         }
         #right>.r2{
             display: inline-block;
             width: 0;
             height: 100%;
            background-color: #333;
             opacity: 0.6;
         }
         p{
             text-align: center;
             font-size: 12px;
             font-weight: bold;
             color: whitesmoke;
             display: none;
         }
        </style>
    </head>
    <body>
        <main>
           <div id="bor"> 
                             
           </div> 
           <div id="left"><span class="l1"><p>special品牌旗舰店</p><br><p>最具传奇浪漫欧洲</p><p>色彩经典设计</p><p>带来专属的魅力</p></span></div>
           <div id="right"><span class="r2"><p>special品牌旗舰店</p><br><p>最具传奇浪漫欧洲</p><p>色彩经典设计</p><p>带来专属的魅力</p></span></div>
        </main>        
    </body>
</html>

<script>
    
    // 橘色边框效果
    $('#bor').hover(function(){
        $('#bor').fadeTo(700,1)
    },function(){
        $('#bor').fadeTo(700,0)
    })

    // 左边遮罩层
    $('#left').hover(function(){
        $('#left p').css('display','block')
        $('.l1').animate({
            width:170,
        },100);    
    },function(){
        $('#left p').css('display','none')
        $('.l1').animate({
            width:0,
        },100);
    })

    // 右边遮罩层
    $('#right').hover(function(){
        $('#right p').css('display','block')
        $('.r2').animate({
            width:170,
        },100);    
    },function(){
        $('#right p').css('display','none')
        $('.r2').animate({
            width:0,
        },100);
    })



</script>


<!--<html>

	<head>
		<meta charset="utf-8" />
		<script src="js/jquery-3.1.1 (1).js"></script>
		<title></title>
		<style>
			main {
				width: 1235px;
				height: 800px;
				margin: 0px auto;
				background-image: url("../images/zhezhao/遮罩.png");
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				position: relative;
			}
			
			div:nth-child(1) {
				width: 380px;
				height: 554px;
				border: 8px solid orange;
				position: absolute;
				top: 6px;
				left: 420px;
				opacity: 0;
			}
			
			div:nth-child(2) {
				width: 386px;
				height: 203px;
				margin-top: -12px;
				position: absolute;
				bottom: 10px;
				left: 420px;
				display: flex;
				justify-content: space-around;
				align-items: center;
				z-index:2;
				overflow: hidden;
			}
			.left,.right{
				width: 170px;
				height: 175px;
				border:8px solid white;
				border-top-width: 10px;
				overflow: hidden;
				
			}
			.right{
				margin-right: 3px;
			}
			span{
				display:inline-block ;
				width: 100%;
				height: 100%;
			    color:white;
			    background-color: #7f7f7e;
			    opacity: 0.5;
			    position: relative;
			    right: 170px;
			    z-index: -3;
			    opacity: 0;
			}
			h1{
				font-size: 14px;
				margin-top: 40px;
				margin-left: 10px;
			}
			p{
				font-size: 13px;
				margin-left: 10px;
			}
			
		</style>
	</head>

	<body>
		<main>
			<div>

			</div>
			<div>
             <section class="left">
             	<span>
             		<h1>special品牌旗舰店</h1>
             		<p>
             			最具传奇色彩的欧洲经典设计，给您带来专属的魅力.
             		</p>
             	</span>
             </section>
             <section class="right">
             	<span>
             		<h1>special品牌旗舰店</h1>
             		<p>
             		  衣款韩版微笑性感红唇上衣圆领女短袖修身T恤
             		</p>
             	</span>
             
             </section>
			</div>
		</main>
	</body>
	<script>
		$("div:first").mouseenter(function() {
			$(this).fadeTo(1000, 1);
		})
		$("div:first").mouseleave(function(){
			$(this).fadeTo(1000,0);
		})
		$("section").mouseenter(function(){
			$(this.children).animate({
				"right":"0px",
				"opacity":"0.5",
			},1000)
		})
		$("section").mouseleave(function(){
			$(this.children).animate({
				"right":"170px",
				"opacity":"0",
			},1000)
		})
	</script>

<ml>-->
